<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Reorder Rows with Drag and Drop</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../../build/event-delegate/event-delegate-min.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
.custom-class {
	opacity: 0.6;filter:alpha(opacity=60);
	color:blue;
	border: 2px solid gray;
}

#datatable tr {
 	cursor: pointer;
}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">

    <cite class="byline">The code for the <code>DDRows</code> class and this example has been contributed to YUI by Gonzalo Cordero, <a target="_blank" href="http://yuiblog.com/blog/2007/12/06/juku/">Juku</a> graduate and Front-End Engineer on the Yahoo! Flex Force team who is currently working on the next generation of Yahoo! homepage.</cite>

<h1>Reorder Rows with Drag and Drop</h1>

<div class="exampleIntro">
	<p>Reorder rows of a DataTable with Drag and Drop.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="datatable"></div>

<script type="text/javascript" src="assets/js/data.js"></script>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.ReorderRows = function() {
        var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event,
            DDM = YAHOO.util.DragDropMgr,
            myColumnDefs = [
                {key:"id"},
                {key:"date", formatter:"date"},
                {key:"quantity", formatter:"number"},
                {key:"amount", formatter:"currency"},
                {key:"title"}
            ],
            myDataSource = new YAHOO.util.LocalDataSource(
                YAHOO.example.Data.bookorders,
                {responseSchema: {fields: ["id","date","quantity","amount","title"]}}
            ),
            myDataTable = new YAHOO.widget.DataTable("datatable", myColumnDefs, myDataSource, {caption:"YUI Datatable/DragDrop"}),
            myDTDTargets = {},
            onRowSelect = function(ev) {
                    var par = myDataTable.getTrEl(Event.getTarget(ev)),
                        srcData,
                        srcIndex,
                        tmpIndex = null,
                        ddRow = new YAHOO.util.DDProxy(par.id);

                    ddRow.handleMouseDown(ev.event);


                    /**
                    * Once we start dragging a row, we make the proxyEl look like the src Element. We get also cache all the data related to the
                    * @return void
                    * @static
                    * @method startDrag
                    */
                    ddRow.startDrag = function () {
                        proxyEl  = this.getDragEl();
                        srcEl = this.getEl();
                        srcData = myDataTable.getRecord(srcEl).getData();
                        srcIndex = srcEl.sectionRowIndex;
                        // Make the proxy look like the source element
                        Dom.setStyle(srcEl, "visibility", "hidden");
                        proxyEl.innerHTML = "<table><tbody>"+srcEl.innerHTML+"</tbody></table>";
                    };

                    /**
                    * Once we end dragging a row, we swap the proxy with the real element.
                    * @param x : The x Coordinate
                    * @param y : The y Coordinate
                    * @return void
                    * @static
                    * @method endDrag
                    */
                    ddRow.endDrag = function(x,y) {
                        Dom.setStyle(proxyEl, "visibility", "hidden");
                        Dom.setStyle(srcEl, "visibility", "");
                    };


                    /**
                    * This is the function that does the trick of swapping one row with another.
                    * @param e : The drag event
                    * @param id : The id of the row being dragged
                    * @return void
                    * @static
                    * @method onDragOver
                    */
                    ddRow.onDragOver = function(e, id) {
                        // Reorder rows as user drags

                        var destEl = Dom.get(id),
                            destIndex = destEl.sectionRowIndex;



                        if (destEl.nodeName.toLowerCase() === "tr") {
                            if(tmpIndex !==null) {
                                myDataTable.deleteRow(tmpIndex);
                            }
                            else {
                                myDataTable.deleteRow(srcIndex);
                            }

                        myDataTable.addRow(srcData, destIndex);
                        tmpIndex = destIndex;


                        DDM.refreshCache();
                        }
                    };
            };


            myDataTable.subscribe('cellMousedownEvent', onRowSelect);





        //////////////////////////////////////////////////////////////////////////////
        // Create DDTarget instances when DataTable is initialized
        //////////////////////////////////////////////////////////////////////////////
        myDataTable.subscribe("initEvent", function() {

            var i, id,
                allRows = this.getTbodyEl().rows;


            for(i=0; i<allRows.length; i++) {
                id = allRows[i].id;
                // Clean up any existing Drag instances
                if (myDTDTargets[id]) {
                     myDTDTargets[id].unreg();
                     delete myDTDTargets[id];
                }
                // Create a Drag instance for each row
                myDTDTargets[id] = new YAHOO.util.DDTarget(id);
            }
        });

        //////////////////////////////////////////////////////////////////////////////
        // Create DDTarget instances when new row is added
        //////////////////////////////////////////////////////////////////////////////
        myDataTable.subscribe("rowAddEvent",function(e){
            var id = e.record.getId();

            myDTDTargets[id] = new YAHOO.util.DDTarget(id);
        });
    }();
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
